<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div
                class="editor-update-tips-dialog"
                v-if="dialogStore.isEditorUpdateTipsDialogVisible"
            >
                <div class="editor-update-tips-dialog__mask"></div>
                <div class="editor-update-tips-dialog__content">
                    <div
                        class="editor-update-tips-dialog__close"
                        @click="onClose"
                    >
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <img
                        :src="`${_oss_}images/mobile/dialog/editor_version/tips.png`"
                    />
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
const dialogStore = useDialogStore();

const onClose = () => {
    dialogStore.isEditorUpdateTipsDialogVisible = false;
};
</script>
<style lang="scss" scoped>
.editor-update-tips-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 322px;
        height: 258px;
        transform: translate(-50%, -50%);

        img {
            width: 100%;
            height: 100%;
        }
    }

    &__close {
        position: absolute;
        bottom: -60px;
        left: 50%;
        width: 30px;
        height: 30px;
        transform: translate(-50%, -50%);
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
